import React from 'react';
import {findDOMNode} from 'react-dom'
import { Toast, } from 'antd-mobile';
import Audio from "./AudioPlay";
import g from '../../../global.js'
import GoEasy from 'goeasy';

var ws=null

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            id: props.match.params.id,
            type: props.match.params.type,
            url: '',
        }
        this.timer=null
    }
	componentDidMount(){
		document.title = ''
        this.getData()
        var _this=this;
        ws = new WebSocket("wss://yikan.cdhhtc.cn/websocket");
        ws.onopen = function(evt) {  //绑定连接事件
    　　    console.log("Connection open ...");
            _this.timer=setInterval(() => {
                ws.send("HeartBeat");
            }, 50000);
        };
        ws.onmessage = function(evt) {//绑定收到消息事件
        　　console.log( "Received Message: " + evt.data);
            var txt=localStorage.getItem('token')+','+_this.state.id+',1'
            ws.send(txt);
        };
    }
	componentWillUnmount(){
        ws.close()
        clearInterval(this.timer)
        console.log("Connection closed.");
    }
    getData(){
        global.Ajax.hhtc_request("product/content_detail",{id: this.state.id,type: this.state.type}).then(data=>{
			if(data.code===1){
                this.setState(data.data)
                this.refs.refTest.playAudio()
			}
		})
    }
    // 上一章、下一章切换
    change(type){
        var id;
        if(type===1){  //上一章
            if(this.state.pre===''){
                return Toast.fail('已经是第一章了!',1)
            }
            id=this.state.pre
        }else{  //下一章
            if(this.state.next===''){
                return Toast.fail('已经是最后一章了!',1)
            }
            id=this.state.next
        }
        this.refs.refTest.pauseAudio()
        this.setState({
            id: id
        },()=>{
            this.getData()
        })
    }
    // 播放、暂停音频
    play(){
        if(this.refs.refTest.state.isPlay){  
            this.refs.refTest.pauseAudio()  //暂停播放
            var txt=localStorage.getItem('token')+','+this.state.id+',2'
            ws.send(txt);
        }else{
            this.refs.refTest.playAudio()  //继续播放
            var txt=localStorage.getItem('token')+','+this.state.id+',3'
            ws.send(txt);
        }
    }
	render(){
		return(
			<div className='audio'>
                <h1>{this.state.title}</h1>
                <img alt='' src={this.state.img} className='pic' />
                <Audio ref='refTest' id={123} src={this.state.url} onChange={(e)=>{
                    if(parseInt(e)===this.state.second*1){
                        if(this.state.next===''){
                            ws.close()
                            clearInterval(this.timer)
                            console.log("关闭心跳");
                            Toast.fail('已经是最后一章了!',1)
                            return;
                        }
                        Toast.success('自动播放下一章',1,()=>{
                            this.change(2)
                        })
                    }
                }}></Audio>
                <div className='audio_btnnn'>
                    <p className='bflb_btn' onClick={()=>{this.props.history.goBack()}}></p>
                    <p className='prev_btn' onClick={this.change.bind(this,1)}></p>
                    <p className='next_btn' onClick={this.change.bind(this,2)}></p>
                    <p className='audio_play_pause_btn' onClick={this.play.bind(this)}></p>
                </div>
            </div>
		)
	}
}
